<template>
  <div class="quxian">
    <div id="chart9"></div>
    <div class="selectshuizhi">
      <!-- <el-select
        v-model="selectValue"
        placeholder="请选择"
        style="width: 115px"
        size="mini"
        @change="selectChange"
      >
        <el-option label="01密闭水质PH" value="15030305400201"></el-option>
        <el-option label="03密闭PH" value="15030305301101"></el-option>
        <el-option label="05密闭PH" value="15030305202001"></el-option>
      </el-select> -->
      <el-cascader
        size="mini"
        :props="cascaderProps"
        v-model="selectValue"
        :options="selectData"
        @change="selectChange"
      ></el-cascader>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
export default {
  data() {
    return {
      myChart: null,
      selectValue: "",
      selectData: [],
      cascaderProps: {
        value: "code",
        label: "name",
        children: "childs",
      },
    };
  },
  methods: {
    selectChange(e) {
      console.log(e, "e");
      this.getList(e[1])
    },
    getSelectList() {
      axios
        .post("/basic/combobox/list", {
          condition: ["qs_type"],
        })
        .then((res) => {
          if (res.data) {
            this.selectData = res.data.qs_type;
            this.selectValue = this.selectData[0].childs[0].code;
            this.getList(this.selectValue)
          }
        });
    },
    getList(val){
      axios.get(`/transgeology/hydrology/qsdata/${val}`, {}).then((res) => {
        let arr = [];
        let xData = [];
        let yData1 = [];
        let yData2 = [];
        if (res.data) {
          arr = JSON.parse(res.data.data);
          arr.forEach((item) => {
            xData.push(item.time);
            yData1.push(item.qt);
            yData2.push(item.st);
          });

          //把数组中字符串转成数字并保留两位小数
          yData1 = yData1.map((item) => {
            return Number(item).toFixed(2);
          })

          yData2 = yData2.map((item) => {
            return Number(item).toFixed(2);
          })
          this.echartsFn(xData, yData1, yData2);
        }
      });
    },
    echartsFn(xData,yData1,yData2) {
      // let xData=['06','07','08','09','10','11','12','13','14','15','16']
      // let yData1= [320,410,730,505,600,545,751,635,536,526,410,407,437]
      // let yData2=[120,110,130,105,100,145,151,135,136,126,110,107,137]
    let  option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#ddd",
                },
              },
              padding: [5, 10],
              extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
              backgroundColor: "#0B2C54", // 提示框浮层的背景颜色。
          borderRadius: 5,
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
              formatter: function (params) {  //使用formatter函数修改需要的样式
                // console.log(params, "params");
                let res = ""
                res += '<div>' + '<div>'+params[0].name + '</div>' +
                  '<p style="color:#fff">' + params[0].seriesName + '：' +'<span style="color:#007f69">'+ params[0].value+'</span>' + 'L/s</p>' +
                  '<p style="color:#fff">' + params[1].seriesName + '：' +'<span style="color:#409eff">' + params[1].value+'</span>' + 'm</p>'
                  + '</div>'
                return res
              }
            },
            legend: {
              show: true,
              x: "center",
              y: "0",
              icon: "circle",
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: "#fff",
              },
            },
            grid: {
              left: "2%",
              right: "2%",
              top: "15%",
              bottom: "0%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: xData,
              boundaryGap: false,
              splitLine: {
                show: false,
                interval: "auto",
                lineStyle: {
                  color: ["#D4DFF5"],
                },
              },
              axisTick: {
                show: true, // 隐藏X轴刻度
            alignWithLabel: true, // 刻度线和标签对齐
            length: 5, // 刻度线的长度
            lineStyle: {
              color: "rgba(255, .3)",
              width: 1,
            },
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, .8)",
                },
              },
              axisLabel: {
            show: true,
            overflow: 'truncate',
            textStyle: {
              color: "rgba(255, 255, 255, .8)", // X轴文字颜色
              fontSize: 12,
            },
            formatter: function (value) {
                    if (value.length > 10) {
                      return `${value.slice(0, 10)}`;
                    }
                    return value;
                  }
          },
            },
            yAxis: [
              {
                type: "value",
                name: "Q(流量：L/s)",
                scale: true,
                axisLabel: {
                  formatter: function (value, index) {
                    return value.toFixed(1);
                  },
                  show: true,
                  textStyle: {
                    color: "rgba(255, 255, 255, .8)",
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(255, 255, 255, .8)",
                  },
                },
                axisTick: {
                show: true, // 隐藏X轴刻度
            alignWithLabel: true, // 刻度线和标签对齐
            inside: true,
            length: 5, // 刻度线的长度
            lineStyle: {
              color: "rgba(255, .3)",
              width: 1,
            },
              },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#fff",
                  },
                },
                // min: (value) => {
                //   // let num = 1 * (value.min.toString().length)
                //   return (value.min - 1).toFixed(1);
                // },
                // max: (value) => {
                //   // let num = 1 * (value.max.toString().length)
                //   // return value.max + 2;
                // }
              },
              {
                type: "value",
                name: "S(降深，m)",
                scale: true,
                axisLabel: {
                  formatter: function (value, index) {
                    return value.toFixed(1);
                  },
                  show: true,
                  textStyle: {
                    color: "rgba(255, 255, 255, .8)",
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(255, 255, 255, .8)",
                  },
                },
                axisTick: {
                show: true, // 隐藏X轴刻度
            alignWithLabel: true, // 刻度线和标签对齐
            inside: true,
            length: 5, // 刻度线的长度
            lineStyle: {
              color: "rgba(255, .3)",
              width: 1,
            },
              },
              splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#fff",
                  },
                },
                // min: (value) => {
                //   // let num = 1 * (value.min.toString().length)
                //   return (value.min - 1).toFixed(1);
                // },
                // max: (value) => {
                //   // let num = 1 * (value.max.toString().length)
                //   // return value.min + 50;
                // }
              },
            ],
            series: [
            {
                name: "Q(流量：L/s)",
                type: "line",
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: yData1,
                // areaStyle: {
                //   normal: {
                //     color: new echarts.graphic.LinearGradient(
                //       0,
                //       0,
                //       0,
                //       1,
                //       [
                //         {
                //           offset: 0,
                //           color: "rgba(0, 127, 105, 1)"
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(245, 247, 247, 0)"
                //         },
                //       ],
                //       false
                //     ),
                //   },
                // },
                itemStyle: {
                  normal: {
                    color: "#007F69",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 2,
                  },
                },
              },
              {
                name: "S(降深，m)",
                type: "line",
                yAxisIndex: 1,
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: yData2,
                // areaStyle: {
                //   normal: {
                //     color: new echarts.graphic.LinearGradient(
                //       0,
                //       0,
                //       0,
                //       1,
                //       [
                //         {
                //           offset: 0,
                //           color: "rgba(64, 158, 255, 1)"
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(64, 158, 255, 0)"
                //         },
                //       ],
                //       false
                //     ),
                //   },
                // },
                itemStyle: {
                  normal: {
                    color: "rgba(64, 158, 255, 1)",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 2,
                  },
                },
              },
    
            ],
          };


      this.myChart.setOption(option);
    },
  },
  created() {
    this.getSelectList();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart9"));
    // this.echartsFn();

    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>
<style scoped lang="scss">
#chart9 {
  width: 100%;
  height: 300px;
}
.quxian {
  position: relative;
  .selectshuizhi {
    position: absolute;
    top: -30px;
    right: 10px;
  }
}
</style>
<style scoped lang="scss">

::v-deep .el-input--mini .el-input__inner {
  color: #dee1e6;
  background-color: #061f41;
  border: 1px solid #2769b0 !important;
  border-radius: 40px;
}
::v-deep .el-input {
  font-size: 10px;
}
::v-deep .el-cascader-menu__list {
  background-color: #061f41;
}
::v-deep .el-scrollbar__view {
  background-color: #061f41;
}
</style>
<style>
/* //选择框边框线 */
 .el-popper{
  border: none !important;
}
/* .el-scrollbar__view{
  background-color: #061f41;
} */
.el-cascader-menu__list {
  background-color: #061f41;
}
.el-cascader-node__label {
  color: #fff;
}
/* .el-icon-arrow-right {
  color: #fff;
} */
 .el-cascader-node__postfix{
  color: #fff;
 }
.el-cascader-node:not(.is-disabled):hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.el-cascader-node:not(.is-disabled).in-active-path {
  background-color: rgba(255, 255, 255, 0.1);
}
.el-cascader-node:not(.is-disabled).is-active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
